<script setup>
import { ref, onMounted } from 'vue'
import mobile from './views/mobile.vue'
import desktop from './views/desktop.vue'
const isMobile = ref(false)
onMounted(() => {
  const mobileWidthThreshold = 1360 // 通常手机屏幕宽度小于1360px
  isMobile.value = window.innerWidth <= mobileWidthThreshold
  // if (isMobile.value) {
  //   document.body.classList.add('mobile-background')
  //   document.body.classList.remove('desktop-background')
  // } else {
  //   document.body.classList.add('desktop-background')
  //   document.body.classList.remove('mobile-background')
  // }
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= mobileWidthThreshold
    // if (isMobile.value) {
    //   document.body.classList.remove('desktop-background')
    //   document.body.classList.add('mobile-background')
    // } else {
    //   document.body.classList.remove('mobile-background')
    //   document.body.classList.add('desktop-background')
    // }
  })
})
</script>

<template>
  <mobile v-if="isMobile" />
  <desktop v-else />
</template>

<style scoped></style>
